<template>
    <div>
        <VueDragResize
            :isActiyve="true"
            :w="175"
            :h="400"
            v-on:resizing="resize"
            v-on:dragging="resize"
            :isResizable="false"
            :parentLimitation="true"
            :parentW="w"
            :parentH="h"
            :x="280"
            :y="47"
            style="background-color: rgba(255, 255, 255, 0.2)"
        >

            <el-row style="background-color: rgba(255, 255, 255, 0.2); z-index: 100">
                <el-table
                    :data="tctList"
                    style="
                            width: 100%;
                            background-color: rgba(255, 255, 255, 0.2);
                        "
                    size="mini"
                    ref="AiTct"
                    :highlightCurrentRow="true"
                    @current-change="handleCurrentChange"
                    :header-cell-style="{
                            'background-color': 'rgba(255,255,255,0.6)',
                            cursor: 'pointer',
                            color: '#777C7C',
                            'font-weight': '400',
                            'font-size': '15px',
                            'text-align': 'center',
                        }"
                >
                    <el-table-column
                        type="index"
                        label="序号"
                        align="center"
                        width="50"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="类型"
                        align="center"
                        width="75"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="count"
                        label="数量"
                        align="center"
                        width="50"
                    >
                    </el-table-column>
                </el-table>

            </el-row>
        </VueDragResize>
    </div>
</template>

<script>
import VueDragResize from 'vue-drag-resize';

export default {
    props: ['tctPartOfGroup'],
    name: 'AiTct',

    components: {
        VueDragResize,
    },

    data() {
        return {
            width: 0,
            height: 0,
            top: 0,
            w: document.documentElement.clientWidth,
            h: document.documentElement.clientHeight - 50,
            left: 0,
            tctList: [],
        };
    },
    computed: {},
    mounted() {
        Object.keys(this.tctPartOfGroup).forEach((item) => {
            let arrOne = this.tctPartOfGroup[item];
            if (arrOne.length > 0) {
                this.tctList.push({
                    name: arrOne[0].partOfGroup,
                    count: arrOne.length,
                });
            }
        });
        this.$refs.AiTct.setCurrentRow(this.tctList[0]);
    },
    methods: {
        resize(newRect) {
            this.width = newRect.width;
            this.height = newRect.height;
            this.top = newRect.top;
            this.left = newRect.left;
        },
        handleCurrentChange(val) {
            if (!!val) {
                this.$emit('click-part-0f-group', val.name);
            }
        },
    },
};
</script>
<style>
.text-style {
    padding: 10px;
    border-bottom: 1px solid #000;
}
.text-style .count {
    float: right;
}
.text-style:hover {
    cursor: pointer;
    background-color: #ccc;
}
</style>
